/* eslint-disable */
<template>
  <div class="history">
    <!--  <el-timeline :reverse="true">-->
    <!--    <el-timeline-item-->
    <!--      class="timeline-item"-->
    <!--      v-for="(activity, index) in fexHistory"-->
    <!--      :key="index"-->
    <!--      :timestamp="activity.timestamp">-->
    <!--      <div class="content">-->
    <!--        {{activity.content}}-->
    <!--      </div>-->
    <!--    </el-timeline-item>-->
    <!--  </el-timeline>-->
    <transition-group name="addHistory" tag="div">
      <div
        :class="'timeline-item timeline-item' + index"
        v-for="(historyItem, index) in historyArr"
        :key="historyItem.id"
        @click="wantWithdraw(historyItem)"
      >
        <div class="contentRow">
          <i :class="getDisplayIcon(historyItem)" />
          <b>{{ getOperationName(historyItem.operation) }}</b>
          {{ " " + getDisplayLabel(historyItem) }}
        </div>
        <div class="messageRow">
          <span>{{ formatDateFun(historyItem.timestamp) }}</span>
        </div>
      </div>
    </transition-group>
  </div>
</template>

<script>
import { formatDate } from "@/utils/date/dateUtil";
import * as historyDisplayUtil from "@/utils/historyDisplay/historyDisplayUtil";
import { multiWithdrawAPI } from "@/api/kgeditor/withdraw";

export default {
  name: "shortHistoryComponent",
  data() {
    return {
      historyArrMax: 5,
      historyArr: [], //短历史队列 时间约新index越大
      lastHiddenId: {},
      KG: this.$parent.$refs.graphComponent.KG,
      operationEnum: this.$parent.$refs.graphComponent.KG.historyManager
        .operationEnum
    };
  },
  created() {
    this.initHistoryArr();
    // window.addEventListener("click",function() {
    //   _this.addHistory();
    // })
  },
  mounted() {},
  watch: {
    "KG.update.historyList": {
      handler: function() {
        this.initHistoryArr();
      },
      deep: true
    }
  },
  methods: {
    getOpacity(index) {
      return "opacity: " + (1 - (this.historyArr.length - index - 1) * 0.2);
    },
    addHistory() {
      let doc = document;
      let _this = this;

      //更新数组
      if (this.historyArr.length >= 5) this.historyArr.splice(0, 1);

      setTimeout(
        (function() {
          //防止动画导致滚动条出现
          doc.body.style.overflowY = "hidden";
          let startId = Symbol();
          _this.lastHiddenId = startId;
          return function() {
            if (startId === _this.lastHiddenId) {
              doc.body.style.overflowY = "auto";
            }
          };
        })(),
        2000
      );
    },
    wantWithdraw(historyItem) {
      let confirmMessage =
        "确定要撤回到执行" +
        this.getOperationName(historyItem.operation) +
        this.getDisplayLabel(historyItem) +
        "操作之前吗？(撤回操作不可撤回,当前选择操作也会被撤回)";
      this.$confirm(confirmMessage, {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.withdraw(historyItem);
      });
    },
    withdraw(historyItem) {
      let historyList = this.KG.kgInfo.historyList;
      let count = 1;
      for (
        let i = 0;
        historyItem.id != historyList[i].id && i < historyList.length;
        i++
      ) {
        count++;
      }

      multiWithdrawAPI(
        {
          kgID: this.KG.kgInfo.id,
          step: count
        },
        () => {
          this.KG.withdrawHistory(historyItem.id);
          this.$message.success("撤回成功");
        },
        error => {
          this.$message.error("撤回失败:" + error);
        },
        () => {}
      );
    },
    getDeletedCount(historyItem) {
      let res = { nodeCount: 0, linkCount: 0 };
      while (historyItem != null) {
        if (historyItem.operation === this.operationEnum.DELETE_NODE)
          res.nodeCount++;
        else if (historyItem.operation === this.operationEnum.DELETE_LINK)
          res.linkCount++;
        historyItem = historyItem.next;
      }
      return res;
    },
    initHistoryArr() {
      let historyList = this.KG.kgInfo.historyList;
      if (this.KG.kgInfo.historyList == undefined) {
        this.historyArr = [];
      } else {
        this.historyArr = [];
        for (
          let i = 0;
          i < Math.min(this.historyArrMax, historyList.length);
          i++
        ) {
          this.historyArr.unshift(historyList[i]);
        }
      }
    },
    getOperationName(operationEnumItem) {
      return historyDisplayUtil.getOperationName(
        this.operationEnum,
        operationEnumItem
      );
    },
    getDisplayLabel(historyItem) {
      return historyDisplayUtil.getDisplayLabel(
        this.operationEnum,
        historyItem
      );
    },
    formatDateFun(timestamp) {
      return formatDate(new Date(timestamp), "yyyy-MM-dd hh:mm:ss");
    },
    getDisplayIcon(historyItem) {
      return historyDisplayUtil.getDisplayIcon(this.operationEnum, historyItem);
    }
  }
};
</script>

<style>
.history {
  /*background: #cccccc;*/
  position: absolute;
  left: 0;
  bottom: 0;
  padding-left: 30px;
  padding-right: 30px;
  padding-bottom: 20px;
  width: 200px;
  background-image: linear-gradient(
    to top,
    rgba(242, 246, 252, 1),
    rgba(242, 246, 252, 0)
  );
}

.history .timeline-item {
  padding: 5px;
  margin-bottom: 5px;
  width: 200px;
  text-align: left;
  color: #606266;
  /*background: #c0c4cc;*/
  /*pointer-events: none;*/
}
.history .timeline-item:hover {
  cursor: pointer;
  background: rgba(192, 196, 204, 0.5);
  color: #303133;
}

.history .timeline-item .contentRow {
  height: 20px;
  white-space: nowrap; /*内容超宽后禁止换行显示*/
  overflow: hidden; /*超出部分隐藏*/
  text-overflow: ellipsis; /*文字超出部分以省略号显示*/
  font-size: 15px;
}
.history .timeline-item .contentRow i {
  margin-right: 10px;
}

.history .timeline-item .messageRow {
  margin-top: 5px;
  height: 10px;
  line-height: 10px;
  font-size: 10px;
}

.addHistory-enter {
  opacity: 0;
  transform: translateY(45px);
}
.addHistory-enter-to {
  opacity: 1;
}
.addHistory-enter-active {
  transition: all 1s;
}
.addHistory-leave {
  transform: translateY(45px);
}
.addHistory-leave-active {
  transition: all 1s;
  position: absolute;
}
.addHistory-leave-to {
  transform: translateY(-45px);
  opacity: 0;
}
.addHistory-move {
  transition: transform 1s;
}
</style>
